<template>
  <view :class="[theme, 'height-100percent f1']">
    <u-image width="100%" height="100%" src="/static/img/bg-knapsack.png" />
    <view class="absolute height-100percent pt-30">
      <u-image width="100%" height="130" src="/static/img/title-box.png" />
      <view class="ai-center">
        <u-image width="600" height="650" src="/static/img/img-key.png" />
        <text class="mt-80 fs-28">
          <text class="color-9">剩余钥匙：</text>
          <text class="color-2">{{ userInfo.nft || 0 }}</text>
        </text>
      </view>
      <view class="fd-row m-30">
        <button @click="beforeUnpack" hover-class="tap-hover" class="f1 ml-30 mr-30 fs-32 color-2 fw-600"
          style="transform:skew(-15deg); background-image: linear-gradient(90deg,#b99cf9, #56bdfc);">
          开启宝箱
        </button>
        <button @click="beforeConvert" hover-class="tap-hover" class="f1 ml-30 mr-30 fs-32 color-2 fw-600"
          style="transform:skew(-15deg); background-image: linear-gradient(90deg, #56bdfc, #b99cf9);">
          兑换钥匙
        </button>
      </view>

      <view class="fd-row jc-sa">
        <navigator url="/pages/client/main/unpackLog" class="color-9 m-30 ai-center fs-26" hover-class="tap-hover"
          style="text-decoration: underline;">
          开奖记录
        </navigator>
        <navigator url="/pages/client/main/collection" class="color-9 m-30 ai-center fs-26" hover-class="tap-hover"
          style="text-decoration: underline;">
          我的藏品
        </navigator>
      </view>

      <view class="f1 jc-center">
        <view class="m-30 p-30  br-12 bg-26 lh-2">
          <text>
            <text class="color-15">*</text>
            <text class="ml-6 color-2">AINFT宝箱钥匙有什么用？</text>
          </text>
          <text class="mt-12 color-9">—— 可用于开启宝箱随机获得 20-1000能源、20-1000星核、手续费分红卡、星级达人卡、星球卡、稀有AINFT等等宝物。</text>
        </view>
      </view>
    </view>

    <u-popup v-model="showPopup.number" @input="changePopup($event, 'number')" mode="bottom" closeable
      :mask-close-able="true" closeIconColor="#fff">
      <view class="bg-13" style="border-radius: 40rpx 40rpx 0 0; padding-bottom: var(--window-bottom);">
        <view style="padding: 50rpx 30rpx 0;">
          <label class="fs-32 color-7 fw-700">星核币兑换钥匙</label>
          <input v-model="number" class="mt-50 oh height-88 pl-20 pr-20 br-50 fs-28 mr-20 bg-2 text-center" type="number"
            placeholder="请输入兑换数量">
          <view class="m-30 ai-center">
            <label class="jc-center">
              <text class="fs-26 color-15">*</text>
              <text class="ml-6 color-9">10个星核币兑换一把钥匙</text>
            </label>
            <label class="mt-30 jc-center">
              <text class="fs-26 color-7">星核币可用余额：</text>
              <text class="fs-30 color-16 fw-500">{{ Number(userInfo.coin || 0).toFixed(3) }}</text>
            </label>
          </view>
        </view>

        <button @click="beforeConvert" class="bg-6 color-2 fs-30 br-50 border-none m-30" style="line-height: 88rpx;" plain
          hover-class="tap-hover">
          立即兑换
        </button>
      </view>
    </u-popup>

    <u-popup v-model="showPopup.password" @input="changePopup($event, 'password')" mode="center" closeable
      :mask-close-able="false" close-icon-color="#333">
      <view class="bg-2 oh br-20" style="width: 90vw;">
        <view class="mt-30 ai-center">
          <text class="mt-16 mb-30 color-6 fs-32 fw-700">请输入支付密码</text>
          <u-message-input @change="inputPayPassword" @finish="submit" focus width="80" :maxlength="6" space="5"
            dot-fill />
        </view>
        <view @click="uniNavigator({ url: `/pages/client/main/setPayPassword` })" hover-class="tap-hover"
          class="mt-10 mb-30 p-20 as-center ml-12 color-15" style="text-decoration: underline;">
          忘记支付密码？
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script lang="ts" setup>
import { useMapState } from "@/common/libs/store";
import { uniNavigator } from "@/common/libs/utils";
import { onLoad } from "@dcloudio/uni-app";
import { ref, reactive } from "vue";
const { $config = {} } = getApp().globalData || {};

const { theme } = useMapState(["theme"]);
const userInfo = ref<AnyObject>({});
const showPopup = reactive({
  number: false,
  password: false,
});
const number = ref();
const payPassword = ref();

onLoad(() => {
  getUserInfo();
});
const getUserInfo = () => {
  uni.request({
    url: $config.API_USER_INFO_GET,
    success({ data }: any) {
      userInfo.value = data;
    },
  });
}

const changePopup = (e: boolean, popupKey: keyof typeof showPopup) => {
  showPopup[popupKey] = e;
}
const inputPayPassword = (val: string) => {
  payPassword.value = val;
}

let type: "unpack" | "convert";
const beforeUnpack = () => {
  showPopup.password = true;
  type = "unpack";
}

const beforeConvert = () => {
  if (!showPopup.number) {
    showPopup.number = true;
    return;
  }
  if (!number.value) {
    uni.showToast({ title: "请输入兑换数量", icon: "none" });
    return;
  }
  showPopup.number = false;
  showPopup.password = true;
  type = "convert"
}

const submit = () => {
  showPopup.password = false;

  if (type === "convert") {
    uni.request({
      url: "/coinToNft",
      data: {
        pay_pass: payPassword.value,
        num: number.value
      },
      success({ msg: title }: any) {
        uni.showToast({ title });
        getUserInfo();
      }
    });
  }

  if (type === "unpack") {
    uni.request({
      url: "/openNft",
      data: { pay_pass: payPassword.value },
      success({ msg: content }: any) {
        uni.showModal({
          title: "温馨提示",
          content,
          showCancel: false
        });
        getUserInfo();
      }
    });
  }
}

</script>

<style>
page {
  height: 100%;
  background-color: #0d1015;
}
</style>
<style lang="scss" scoped>
// scss
</style>